<template>
  <view class="template-instructions">
    <!-- 顶部自定义导航栏 -->
    <tn-nav-bar fixed customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
      </view>
      <view slot="content" class="tn-custom-nav-bar__title">使用说明</view>
    </tn-nav-bar>

    <!-- 主要内容区域 -->
    <view class="content-wrapper tn-safe-area-inset-bottom">
      <scroll-view scroll-y class="markdown-content">
        <!-- 示例内容，你可以替换成实际的Markdown内容 -->
        <view class="section">
          <view class="section-title">快速开始</view>
          <view class="section-content">
            <view class="paragraph">
              欢迎使用我们的应用！本指南将帮助您快速了解应用的主要功能和使用方法。
            </view>
          </view>
        </view>

        <view class="section">
          <view class="section-title">基本功能</view>
          <view class="section-content">
            <view class="list-item">• 首页浏览：查看最新内容和推荐</view>
            <view class="list-item">• 搜索功能：快速找到需要的内容</view>
            <view class="list-item">• 个人中心：管理个人信息和设置</view>
          </view>
        </view>

        <view class="section">
          <view class="section-title">高级特性</view>
          <view class="section-content">
            <view class="paragraph">
              我们提供了多种高级功能来提升您的使用体验：
            </view>
            <view class="list-item">1. 智能推荐</view>
            <view class="list-item">2. 个性化设置</view>
            <view class="list-item">3. 数据同步</view>
          </view>
        </view>

        <view class="section">
          <view class="section-title">常见问题</view>
          <view class="section-content">
            <view class="qa-item">
              <view class="question">Q: 如何修改个人信息？</view>
              <view class="answer">A: 进入个人中心，点击头像即可修改个人信息。</view>
            </view>
            <view class="qa-item">
              <view class="question">Q: 如何联系客服？</view>
              <view class="answer">A: 在"我的"页面点击"问题反馈"即可联系客服。</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Instructions',
  data() {
    return {
      // 可以在这里添加需要的数据
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.template-instructions {
  min-height: 100vh;
  background-color: #ffffff;
  
  /* 导航栏样式 */
  .tn-custom-nav-bar {
    &__back {
      width: 60rpx;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 30rpx;
      
      .icon {
        font-size: 44rpx;
        color: #333333;
      }
    }
    
    &__title {
      color: #333333;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
}

/* 内容区域样式 */
.content-wrapper {
  padding: 30rpx;
  margin-top: 180rpx; // 从90rpx改为180rpx，增加与顶部的距离
}

.markdown-content {
  height: calc(100vh - 220rpx); // 相应调整高度，从120rpx改为220rpx
  
  .section {
    margin-bottom: 40rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 24rpx rgba(0, 0, 0, 0.05);
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 20rpx;
      position: relative;
      padding-left: 24rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background-color: #0084ff;
        border-radius: 6rpx;
      }
    }
    
    .section-content {
      color: #666666;
      
      .paragraph {
        font-size: 28rpx;
        line-height: 1.8;
        margin-bottom: 20rpx;
        text-align: justify;
      }
      
      .list-item {
        font-size: 28rpx;
        line-height: 1.8;
        padding-left: 20rpx;
        margin-bottom: 16rpx;
        position: relative;
      }
      
      .qa-item {
        margin-bottom: 24rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .question {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          margin-bottom: 8rpx;
        }
        
        .answer {
          font-size: 28rpx;
          color: #666666;
          line-height: 1.6;
          padding-left: 20rpx;
        }
      }
    }
  }
}

/* 安全区适配 */
.tn-safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>